<template>
    <view class="wrap">
        <view class="wrap_serch">
            <view class="search_header">
                <view class="u_search_wrap">
                    <u-search placeholder="请输入商品名称" :clearabled="true" borderColor="#fff" :showAction="false"
                        v-model.trim="keyword"></u-search>
                </view>
                <u-button text="搜索" @click="search" class="Color_" iconColor="#fdd100"></u-button>
            </view>
            <view class="hisdory">
                <view class="hisdory_wrap">
                    <view class="title">历史搜索</view>
                    <u-icon name="trash" @click="show = true" color="#000" size="24"></u-icon>
                </view>
                <u-modal :show="show" :content='content' @confirm="confirm"></u-modal>

            </view>
            <view class="hisdory_record">
                <text class="record" v-for="(item, index) in hisdory_record">{{ item }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            hisdory_record: [],
            show: false,
            content: '你确定要清空历史记录吗',
        }
    },
    mounted() {
        this.hisdory_record = uni.getStorageSync('hisdory_record')
    },
    methods: {
        search() {
            let { hisdory_record, keyword } = this
            if (this.keyword == '') return
            let index = hisdory_record.indexOf(keyword)
            if (index >= 0) {
                hisdory_record.splice(index, 1)
            }
            this.hisdory_record.unshift(this.keyword)
            uni.setStorageSync('hisdory_record', hisdory_record)
            this.keyword = ''
            uni.navigateTo({ url: '/pages/search/searchList?keyword=' + keyword })
        },
        //清空全部历史
        confirm() {
            this.hisdory_record = []

            uni.removeStorageSync("hisdory_record")

            this.show = false

        }
    },
}
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100vh;
    background-color: #fff;

    .wrap_serch {
        width: 90%;
        margin: 0 auto;

        .search_header {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f4f4f4;

            .u_search_wrap {
                width: 80%;

                /deep/.u-search {
                    width: 100%;
                }
            }


            /deep/ .u-button--info {
                width: 15%;
                height: 35px;
                background-color: aqua;
            }
        }

        .hisdory {
            width: 100%;

            .hisdory_wrap {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }
            }
        }

        .hisdory_record {
            width: 100%;
            margin-top: 5px;
            background-color: #fff;

            .record {
                display: inline-block;
                padding: 5px 10px;
                background-color: #eeeeee;
                border-radius: 15px;
                margin: 6px;
            }

        }
    }
}
</style>